.nav a :hover{
    color: orange;
}
body {
    background-image: url("background.png");
    background-size: cover; 
    background-repeat: no - repeat; 
    background-attachment: fixed; 
    padding:50px;
}
.head{
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
}
.logo{
    display: flex;
    flex-direction: row;
    justify-content:left;
    align-items: center;

}
.youshang{
    display: flex;
    flex-direction: row;
    justify-content:flex-end;
    align-items: center;
}
.search{
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
}
.tu{
    display: flex;
    flex-direction: row;
    justify-content:right;
    align-items: center;
}
.main-container {
display: flex;
flex-direction: column;
height: fit-content;}
.header {
justify-content: between;
align-items: center;
padding: 20px;
}
.nav
{
    height:50px;
	background:url(tou.png) no-repeat;
    background-size:cover
}
.nav a{
  color:black;
  text-decoration:none;
  line-height:50px;
}
.nav ul {
display: flex;
list-style: none;
align-items: center;
justify-content:center;

}
.nav ul li {
margin-right: 95px;
}
.main {
flex: 1;
padding: 10px;
background:url(dimian.png);
background-size:cover;

}
.contact_book {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 640px;
    height: 361px;
    z-index: 38;
  }
  .Stroke_1 {
    border-width: 0.5px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    position: absolute;
    left: 561px;
    top: 156px;
    width: 10px;
    height: 8px;
    z-index: 37;
  }
  .Rectangle_2 {
    border-width: 0.5px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    position: absolute;
    left: 558px;
    top: 154px;
    width: 13px;
    height: 13px;
    z-index: 36;
  }
  
.email-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
background:url(youxaingbackground.png);
background-size:cover;
}

.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.email-content {
    flex: 1;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding: 10px;

}
.date {
    font-size: 12px;
    color: #999;
}
.action {
    margin-left: 10px;
}
.action a {
    text-decoration: none;
    color: #007BFF;
}
body {
    background-color: #f8f9fa;
}
.sidebar{
    display:flex;
    flex-direction:column;
    justify-content:start;
    align-items:center;
    height:100vh;
}
.container{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:normal;
    height:400px;
} 
.header {
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.email-item {
background-color: #fff;
border-radius: 5px;
padding: 10px;
}
.footer{
    width:100%;
    padding:inherit;
}
.sidebar{
    display:flex;
    flex-direction:column;
    justify-content:start;
    align-items:center;
    height:100vh;
    padding:30px;
}
